<template>
  <view class="map-container">
    <map
      id="map"
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :scale="scale"
      :enable-scroll="false"
      :enable-zoom="false"
      @markertap="handleMarkerTap"
    />
  </view>
</template>

<script setup>
/* ---------- 依赖 ---------- */
import { ref, onMounted, watch, nextTick } from 'vue'

/* ---------- props ---------- */
const props = defineProps({
  center: { type: Object, default: null }   // { latitude, longitude }
})

/* ---------- 响应式数据 ---------- */
const latitude  = ref(31.820571)   // 默认合肥市政府
const longitude = ref(117.227308)
const scale     = ref(16)
const markers   = ref([])
const isGettingLocation = ref(false)

/* ---------- 地图上下文（支付宝用） ---------- */
let mapCtx = null

/* ---------- 生命周期 ---------- */
onMounted(() => {
  // 支付宝 / 微信通用：拿到上下文
  mapCtx = uni.createMapContext('map', this)

  // 如果父组件第一次就给了坐标，直接跳
  if (props.center?.latitude != null && props.center?.longitude != null) {
    jump(props.center.latitude, props.center.longitude)
  } else {
    // 否则定位当前位置
    getCurrentLocation()
  }
})

/* ---------- 监听外部中心点变化 ---------- */
watch(() => props.center, async (val) => {
  if (!val || val.latitude == null || val.longitude == null) return

  jump(val.latitude, val.longitude)
}, { immediate: true, deep: true })

/* ---------- 核心业务函数 ---------- */
// 统一跳点 + 插旗
function jump(lat, lng) {
  // 1. 同步到本地（微信自动刷新视野）
  latitude.value  = lat
  longitude.value = lng

  // 2. 插旗（始终复用 id=1）
  // addMarker(lat, lng)

  // 3. 支付宝显式跳转
//   #ifdef MP-ALIPAY
  nextTick(() => {
    mapCtx?.moveToLocation({
      latitude: lat,
      longitude: lng,
      success: () => console.log('支付宝地图已跳转'),
      fail: (e) => console.warn('moveToLocation 失败', e)
    })
  })
  // #endif

  addMarker(lat, lng);
}

// 获取当前位置（仅用于首次无坐标时）
function getCurrentLocation() {
  if (isGettingLocation.value) return
  isGettingLocation.value = true

  uni.getLocation({
    type: 'gcj02',
    success: (res) => jump(res.latitude, res.longitude),
    fail: () => {
      // 失败就用默认值（已在 ref 里设置）
      uni.showToast({ title: '定位失败，使用默认位置', icon: 'none' })
    },
    complete: () => (isGettingLocation.value = false)
  })
}

// 插旗（始终只有 1 个标记）
function addMarker(lat, lng) {
  markers.value = [{
    id: 1,
    latitude: lat,
    longitude: lng,
    width: 36,
    height: 44,
    iconPath: 'https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/ico_location.png',
    callout: {
      color: '#000000',
      fontSize: 11,
      borderRadius: 4,
      bgColor: '#ffffff',
      padding: 8,
      display: 'ALWAYS'
    }
  }]
  console.log('已插旗');
}
function handleMarkerTap(e) {
  const marker = markers.value.find(item => item.id === e.markerId)
  if (marker) {
    uni.showToast({
      title: `位置: ${marker.latitude.toFixed(6)}, ${marker.longitude.toFixed(6)}`,
      icon: 'none',
      duration: 2000
    })
  }
}

/* ---------- 供父组件手动调用的方法 ---------- */
function setLocation(lat, lng) { jump(lat, lng) }
function getMapLocation() {
  return { latitude: latitude.value, longitude: longitude.value }
}

defineExpose({ setLocation, getMapLocation, getCurrentLocation })
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
}
.map {
  width: 100%;
  height: 120px;
}
</style>